import React, {useEffect, useRef, useState} from 'react';
import {
    View,
    TextInput,
    ScrollView,
    StyleSheet,
    Platform, TouchableOpacity, Image, Text, Modal, FlatList,
    PermissionsAndroid
} from 'react-native';
import addIcon from "@/assets/images/releaseImg/addIcon.png";
import tagIcon from "@/assets/images/releaseImg/tagIcon.png";
import tagIconRight from "@/assets/images/releaseImg/tagIconRight.png";
import addressIcon from "@/assets/images/releaseImg/addressIcon.png";
import addressRightIcon from "@/assets/images/releaseImg/addressRightIcon.png";
import clockIcon from "@/assets/images/releaseImg/clockIcon.png";
import AntDesign from "@expo/vector-icons/AntDesign";
import SwitchToggle from "react-native-switch-toggle";
import {scaleSize} from "@/utils/screenSize";
import {Stack, useRouter, useLocalSearchParams} from "expo-router";
import axios from "axios";
import {useRequest} from "ahooks";
import addressCheck from "@/assets/images/releaseImg/adressCheck.png";
import searchIcon from "@/assets/images/releaseImg/searchIcon.png";
import MapView, {Marker} from "react-native-maps";
import SingleOickerModal from "@/components/SinglePickerModal";
import MultiColumnPickerModal from "@/components/MultiColumnPickerModal";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import * as ImagePicker from "expo-image-picker";
import { getActivityTypeList, postCreateActivityItem } from "@/services/releaseServices";
import {loadingService} from "@/utils/loadingServer";
import {getToken} from "@/utils";
import {api, txApiKey} from "@/config/config-params";
import {showToast} from "@/utils/rootToast";
import tagCloseIcon from "@/assets/images/releaseImg/tagCloseIcon.png";
import {useSelector, useDispatch} from "react-redux";
import {
    setActivityTypeObj,
    setInputDataByItem,
    setOpennessObj,
    resetInputData,
    resetTicketData,
    setTicketBylist
} from "@/store/slices/createActiveSilce"
import createActivityCloseBtn from "@/assets/images/activityImg/createActivityCloseBtn.png";
import {RootState} from "@/store";
import { getEditactivityByDetail, updateActivityByDetail } from "@/services/activityServices"
import {format, getDay} from "date-fns/index";
import {WebView} from "react-native-webview";

const opennessList = [
    { label: '所有人可见', value: 1 },
    { label: '社群成员可见', value: 2 },
    { label: '分享可见', value: 3 }
]

const createActivityScreen = () => {
    const router = useRouter();
    const [isVisialMap, setIsVisialMap] = useState(true);
    const [showSearchModal, setShowSearchModal] = useState(false);
    const [activeAdress, setActiveAdress] = useState(0);
    const [mapKey, setMapKey] = useState(1);
    const [showSelectTag, setShowSelectTag] = useState(false);
    const [showActivityType, setShowActivityType] = useState(false)
    const [showSelectDate, setShowSelectDate] = useState(false);
    const [foundTextModel, setFoundTextModel] = useState(false);

    const [typeList, setTypeList] = useState([]);
    const [selectActivityType, setSelectActivityType] = useState(typeList[0]?.value || "");
    const [selectTypeIndex, setSelectTypeIndex] = useState(0);
    const [tempSelectTypeAll, setTempSelectTypeAll] = useState<any>({});
    const [activityTime, setActivityTime] = useState("");
    const [showOpennessVisible, setShowOpennessVisible] = useState(false)
    const [selectOpenness, setOpenness] = useState(opennessList[0]?.value || "");
    const [selectOpennessIndex, setOpennessIndex] = useState(0);
    const [tempOpenness, setTempOpenness] = useState<any>({});
    const [currentTag, setCurrentTag] = useState("");
    const [cityList, setCityList] = useState([]);
    const [searchTitle, setSearchTitle] = useState("")
    const [searchFlag, setSearchFlag] = useState(true);
    const [html, setHtml] = useState('')

    const [region, setRegion] = useState({
        latitude: 23.114155,
        longitude: 113.318977,
    });

    const webviewRef = React.useRef(null);

    const createActive = useSelector((state: RootState) => state.createActive);
    const loginStore = useSelector((state: RootState) => state.login);

    const dispatch = useDispatch();
    const localParams = useLocalSearchParams();

    const searchInptRef = useRef(null);

    const goTicketSetting = function () {
        if (createActive.inputData.durationStartTime && createActive.inputData.durationEndTime) {
            router.push("/createActivity/ticketSetting")
        } else {
            showToast("请选择活动时间");
        };

    };

    useEffect(() => {

        console.log('createActive', createActive?.inputData)

       setTimeout(() => {
           if (createActive?.activityTypeObj && createActive.createActivityType !== 'edit') {
               setSelectActivityType(createActive.activityTypeObj?.val);
               setSelectTypeIndex(createActive.activityTypeObj?.index);
           };
       }, 1000)

        if (createActive?.opennessObj && createActive.createActivityType !== 'edit') {
            setOpenness(createActive.opennessObj?.val || opennessList[0]?.value);
            setOpennessIndex(createActive.opennessObj?.index || 0);
        };
    }, [])



   useEffect(() => {
       // console.log('loginStoreloginStoreloginStore', loginStore.locationInfo);

       if (loginStore?.locationInfo?.location && loginStore?.locationInfo?.location?.lat && loginStore?.locationInfo?.location?.lng) {
           setRegion({
               latitude: loginStore.locationInfo.location.lat,
               longitude: loginStore.locationInfo.location.lng,
           });
       };

       getActivityTypeList()
           .then(res => {
               const itemEach = res.data?.typeList;
               const list = [];
               itemEach.forEach((item: any, index: number) => {
                   const obj = {
                       label: item.name,
                       value: item.id,
                   };
                   list.push(obj);
               })
               setTypeList(list)
           })
           .catch(err => {
               console.log('err', err);
           })
   }, [])


    useEffect(() => {
        console.log('createActive', createActive)
        if (createActive.createActivityType == 'edit' || createActive.createActivityType == 'copy') {
            getEditactivityByDetail(createActive.editActivityId)
                .then(res => {
                    const resultData = res.data;
                    const weekDayMap = ['日', '一', '二', '三', '四', '五', '六'];
                    let startYear = "";
                    let startMonth = "";
                    let startDay = "";

                    let endYear = "";
                    let endMonth = "";
                    let endMDay = "";

                    if (resultData?.durationStartTime) {
                        startYear = format(resultData?.durationStartTime, `MM月dd日 周${weekDayMap[getDay(resultData?.durationStartTime)]}`)
                        startMonth = format(resultData?.durationStartTime, `HH`);
                        startDay = format(resultData?.durationStartTime, `mm`);
                    };

                    if (resultData?.durationEndTime) {
                        endYear = format(resultData?.durationEndTime, `MM月dd日 周${weekDayMap[getDay(resultData?.durationEndTime)]}`)
                        endMonth = format(resultData?.durationEndTime, `HH`);
                        endMDay = format(resultData?.durationEndTime, `mm`);
                    };

                    const time = `${startYear} ${startMonth}:${startDay} - ${endYear} ${endMonth}:${endMDay}`;

                    console.log('resultData', resultData);

                    const inputData = {
                        "title": resultData.title,
                        "imgUrls": resultData.imgUrls,
                        "tags": resultData.tags || [],
                        "introduce": resultData.introduce,
                        "durationStartTime": resultData.durationStartTime,
                        "durationEndTime": resultData.durationEndTime,
                        "minNumOfPeople": resultData.minNumOfPeople + "",
                        "isWrittenOff": resultData.isWrittenOff ? true : false,
                        "isManualReviewed": resultData.isManualReviewed ? true : false,
                        "participateInNotice": resultData.participateInNotice || "",
                        "refundNotice": resultData.refundNotice || "",
                        "showToParticipants": resultData.showToParticipants || "",
                        "contact": resultData.contact || "",
                        "tickets": [
                            ...resultData.tickets,
                        ],
                        time,
                        currentLocation: {
                            province: resultData.province,
                            city: resultData.city,
                            title: resultData.destName,
                            location: {
                                lng: resultData.destLongitude,
                                lat: resultData.destLatitude
                            },
                        },
                    };
                    const tmpTypeList = [
                        ...typeList,
                    ];


                    const typeIndex = tmpTypeList.findIndex((item: any) => resultData.typeId == (item.value + ""));

                    console.log('typeIndex', typeIndex);

                    if (typeIndex !== -1) {
                        setSelectTypeIndex(typeIndex);
                        setSelectActivityType(tmpTypeList[typeIndex].value)
                        dispatch(setActivityTypeObj({ activityTypeObj: { val: tmpTypeList[typeIndex].value, index: typeIndex } }))

                    };

                    const opennessIndex = opennessList.findIndex((item: any) => resultData.typeId == (item.value + ""));


                    if (opennessIndex !== -1) {
                        setOpenness(opennessList[opennessIndex].value);
                        setOpennessIndex(opennessIndex);
                        dispatch(setOpennessObj({ opennessObj: { val: opennessList[opennessIndex].value, index: opennessIndex } }))

                    };

                    dispatch(setInputDataByItem({ ...inputData  }))
                    dispatch(setTicketBylist({ ticketData: resultData.tickets  }))

                })
                .catch(err => {
                    console.log('err', err)
                })

        } else if( localParams.from == 'createActivity'){
            dispatch(resetInputData())
        };
    }, [typeList])


    const getMapByTitleRequest = function (title?: string) {
        axios.get(`https://apis.map.qq.com/ws/place/v1/suggestion?key=${txApiKey}&keyword=${title}`)
            .then(res => {
                console.log('res', res.data.data);
                setCityList(res.data?.data);

            })
            .catch(err => {
                console.log('err', err);
            })
    };

   useEffect(() => {
       if (loginStore.locationInfo.address && searchFlag) {
           getMapByTitleRequest(loginStore.locationInfo.address || "");
           setSearchFlag(false);
       };
   }, [])


    // useEffect(() => {
    //     // run('广州');
    // }, [])

    const handleRegionChangeComplete = (newRegion) => {
        setRegion(newRegion);
    };


    // const { data, loading, run } = useRequest(getLocationByKeyword, {
    //     throttleWait: 1000,
    //     manual: true,
    // });

    const searchByKeyword = function (val: string) {
        setSearchTitle(val);
    };

    // useEffect(() => {
    //     console.log('data', data);
    // }, [data])

    const cityReaderItem = function ({ item, index }) {
        return (
            <TouchableOpacity onPress={() => buildMap(index, item)}>
                <View style={styles.locationItem}>
                    <View style={{ width: 320}}>
                        <Text style={styles.locationTitle}>{ item?.title }</Text>
                        <Text style={styles.locationDescription}>{ item?.address }</Text>
                    </View>
                    {
                        activeAdress == index && (
                            <View style={styles.adressIcon}>
                                <Image source={addressCheck} style={{ width: "100%", height: "100%" }} />
                            </View>
                        )
                    }
                </View>
            </TouchableOpacity>
        )
    };

    const blurSearchInp = function () {
        searchInptRef.current.blur();
        setIsVisialMap(true);
    };



    const buildMap = function (index, item) {
        setActiveAdress(index)
        const location = item.location;

        setMapKey(mapKey + 1); // 改变 key 强制刷新
        dispatch(setInputDataByItem({ currentLocation: item }))

        setRegion({
            latitude: location.lat,
            longitude: location.lng,
        })

        webviewRef.current?.postMessage(JSON.stringify({ lat: location.lat, lng: location.lng }));
    };



    const onChangeinputData = function (val, key) {
        console.log("create", createActive)
        dispatch(setInputDataByItem({ [key]: val }))
    };

    const resetSelectTypeAll = function () {
        setSelectTypeIndex(tempSelectTypeAll?.index || 0);
        setSelectActivityType(tempSelectTypeAll.id || typeList[0].id);
    };

    const resetOpennessAll = function () {
        setOpennessIndex(tempOpenness?.index || 0);
        setOpenness(tempOpenness?.value || opennessList[0].value);
    };

    const pickImage = async () => {
        // Request media library permissions
        let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();


        if (permissionResult.granted === false) {
            alert('Permission to access the media library is required!');
            return;
        }

        // Open image picker
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            // allowsEditing: true,
            // aspect: [4, 3],
            quality: 1,
        });
        if (!result.canceled) {
            const formData = new FormData();
            formData.append('img', {
                uri: result.assets[0].uri,
                type: "image/*",
                name: result.assets[0].fileName, // 图片名称
            });

            loadingService.show();

            const token = await getToken();
            loadingService.show();

            try {
                const response = await axios.post(`${api}/social/uploadImg`, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        // "Accept": "application/json",
                        "Authorization": token,
                    },
                });
                if (response?.data.code == 200) {
                    loadingService.hide();
                    const imgList = [...createActive.inputData.imgUrls, response.data.data.url];
                    console.log('createActive', createActive);
                    dispatch(setInputDataByItem({ imgUrls: imgList }))
                    // setAvatorImg(response.data.data.url)
                } else {
                    showToast(response?.data.msg)
                };

                loadingService.hide();
            } catch (error) {
                console.error('上传失败：', error);
                loadingService.hide();
            }


        }
    };

    const goBindGroup = function () {
        router.push("/createActivity/bindGroup")
    };

    const buildActivity = function () {
        console.log('fabu')
        if (!createActive.inputData?.title) {
            return showToast("请填写活动标题");
        };

        if (!createActive.inputData?.introduce) {
            return showToast("请填写活动介绍");
        };

        if (createActive.inputData?.imgUrls.length < 0) {
            return showToast("至少上传一张活动图片")
        };

        if (createActive.inputData.tags < 0) {
            return showToast("至少添加一个活动标签")
        };

        if (!createActive.inputData.currentLocation) {
            return showToast("请添加活动地址")
        };

        if (!createActive.inputData?.durationStartTime || !createActive.inputData?.durationEndTime) {
            return showToast("请添加活动时间")
        };

        if (!createActive.inputData?.minNumOfPeople) {
            return showToast("请填写活动人数")
        };

        if (!selectActivityType) {
            return showToast("请选择活动类型")
        };

        /* 另外一个页面先省略部分暂时空 */
        if (createActive.ticketData.length <= 0) {
            return showToast("请创建票种或门票")
        };

        /* 关联社群遗漏部分暂时空 */
        // if (!createActive.inputData.parentId) {
        //      return showToast("请关联社群")
        // };

        loadingService.show();
        const address = createActive.inputData?.currentLocation.province;


        const data = {
            "typeId": typeList[selectTypeIndex]?.value,
            "title": createActive.inputData.title,
            "imgUrls": createActive?.inputData?.imgUrls,
            "introduce": createActive.inputData?.introduce,
            "tags": createActive.inputData.tags || [],
            "province": address || "",
            "city": createActive.inputData?.currentLocation?.city,
            "destName": createActive.inputData?.currentLocation.title,
            "destLongitude": createActive.inputData?.currentLocation.location?.lng,
            "destLatitude": createActive.inputData?.currentLocation.location?.lat,
            "durationStartTime": createActive.inputData.durationStartTime,
            "durationEndTime": createActive.inputData.durationEndTime,
            "minNumOfPeople": createActive.inputData?.minNumOfPeople,
            "isWrittenOff": createActive.inputData.isWrittenOff ? 1 : 0,
            "isManualReviewed": createActive.inputData.isManualReviewed ? 1 : 0,
            "openness": opennessList[selectOpennessIndex].value,
            "participateInNotice": createActive.inputData?.participateInNotice || "",
            "refundNotice": createActive.inputData?.refundNotice || "",
            "showToParticipants": createActive.inputData?.showToParticipants || "",
            "contact": createActive.inputData?.contact || "",
            "groupId": createActive?.inputData?.parentId?.parentId,
            "tickets": [
                ...createActive.ticketData,
            ]
        };

        console.log('data', data);

        if (createActive.createActivityType == 'create' || createActive.createActivityType == 'copy') {
            postCreateActivityItem(data)
                .then(res => {
                    console.log('res', res)
                    showToast("创建活动成功！");
                    router.push("/createActivity/createActivitySuccess/2")
                    dispatch(resetInputData())
                    dispatch(resetTicketData())
                })
                .catch(err => {
                    console.log('err', err)
                })
        } else if (createActive.createActivityType == 'edit') {
            Reflect.set(data, "activityId", createActive.editActivityId);
            console.log('data', data);
            updateActivityByDetail(data)
                .then(res => {
                    console.log('updateActivityByDetail', res)
                    showToast("更新活动成功！");
                    router.push(`/activityDetail/${createActive.editActivityId}`)
                    dispatch(resetInputData())
                    dispatch(resetTicketData())
                })
                .catch(err => {
                    console.log('err', err);
                })
        };


    };

    const pushTag = function () {
        const list = [...createActive.inputData.tags, currentTag];
        setCurrentTag("");
        dispatch(setInputDataByItem({ tags: list }));
        setShowSelectTag(false)
    };

    const removeTagItem = function (index) {
        const list = [];
        createActive.inputData.tags.forEach((item: any, idx: number) => {
            if (index !== idx) {
                list.push(item);
            };
        })
        dispatch(setInputDataByItem({ tags: list }));
    };

    const computedActiveBtn = function () {
        const bol = selectActivityType &&
                    createActive.inputData.title &&
                    createActive.inputData.imgUrls.length > 0 &&
                    createActive.inputData.introduce &&
                    createActive.inputData.tags.length > 0 &&
                    createActive.inputData.minNumOfPeople &&
                    createActive.ticketData.length > 0 &&
                    (createActive.inputData.durationStartTime || createActive.inputData.durationEndTime)
        return bol;
    };

    const removeImage = function (index: number) {
        const list = [];
        createActive.inputData.imgUrls.forEach((item: any, idx: number) => {
            if (index !== idx) {
                list.push(item);
            };
        })
        dispatch(setInputDataByItem({ imgUrls: list }))

    };

    const searchByTitle = function () {
        if (searchTitle == '') return showToast("请输入搜索内容！");
        getMapByTitleRequest(searchTitle)
        searchInptRef.current.blur();
    };


    useEffect(() => {
        console.log('region', region);
        if (!showSearchModal) return;
        const tmpHtml = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <script src="https://map.qq.com/api/gljs?v=1.exp&key=VS6BZ-V2CCG-WVAQL-QM2WG-AMJIE-NOF3Q"></script>
      <style>
        #map { width: 100vw; height: 100vh; }
          body, html {
              margin: 0;
              padding: 0;
              height: 100%;
              width: 100%;
            }
      </style>
    </head>
    <body>
      <div id="map"></div>
      <script>
        
         var latitude = ${region?.latitude};  // 注入外部变量
         var longitude = ${region?.longitude};  // 注入外部变量
         
        // 初始化地图
        var map = new TMap.Map('map', {
          center: new TMap.LatLng(latitude, longitude), // 地图中心点（经纬度）
          zoom: 14
        });
        
         window.updateMap = function(lat, lng) {
          var newCenter = new TMap.LatLng(lat, lng);
          map.panTo(newCenter); // 刷新地图位置
        };

        // 添加标注点
        var marker = new TMap.MultiMarker({
          id: 'marker-layer',
          map: map,
          styles: {
            marker: new TMap.MarkerStyle({
              width: 25, // 图标宽度
              height: 35, // 图标高度
              anchor: { x: 16, y: 32 }, // 锚点（调整图标位置）
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png' // 自定义图标
            })
          },
          geometries: [
            {
              id: 'm1',
              styleId: 'marker',
              position: new TMap.LatLng(latitude, longitude), // 标记点坐标
              properties: {
                title: '当前位置'
              }
            }
          ]
        });

        // 点击事件
        // marker.on('click', (event) => {
        //   var geometry = event.geometry;
        //   alert("点击了标记点: " + geometry.properties.title);
        // });
        
         window.updateMap = function(lat, lng) {
          var newCenter = new TMap.LatLng(lat, lng);
          map.panTo(newCenter); // 刷新地图中心位置
          
           marker.setGeometries([]); 

          // 添加新的标记点
          marker.setGeometries([
            {
              id: 'marker',
              styleId: 'marker',
              position: new TMap.LatLng(lat, lng),
              properties: {
                title: '当前位置'
              }
            }
          ]);
          
        };

        // 接收来自 React Native 的消息并更新地图位置
        window.addEventListener('message', function(event) {
          var data = JSON.parse(event.data);
          window.updateMap(data.lat, data.lng);
        });
        
      </script>
    </body>
    </html>
  `;
        setHtml(tmpHtml)
    }, [showSearchModal])



    return (
        <View style={styles.container}>
            <Stack.Screen
                options={{
                    title: '发布活动', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <KeyboardAwareScrollView
                style={styles.scrollView}
                contentContainerStyle={styles.scrollViewContent}
                keyboardShouldPersistTaps="handled"
                extraScrollHeight={80} // 调整额外滚动高度，确保不会被键盘遮挡
            >
                {/* 可滚动视图 */}
                <ScrollView
                    style={styles.scrollView}
                    contentContainerStyle={styles.scrollViewContent}
                    keyboardShouldPersistTaps="handled"
                >
                    <View style={styles.createActivityContainer}>
                        <View style={styles.createActivityHeader}>
                            <View style={styles.activityTitle}>
                                <TextInput
                                    placeholder="请填写活动标题（必填）"
                                    value={createActive?.inputData?.title}
                                    onChangeText={(val) => onChangeinputData(val, "title")}
                                />
                            </View>
                            <View style={styles.activityDesc}>
                                <TextInput
                                    multiline={true}
                                    style={{ height: 100 }}
                                    placeholder="描述一下活动的亮点、活动内容"
                                    value={createActive?.inputData?.introduce}
                                    onChangeText={(val) => onChangeinputData(val, "introduce")}
                                />
                            </View>
                            <View style={styles.addPicContainer}>
                                <ScrollView
                                    horizontal={true}
                                    showsHorizontalScrollIndicator={false}
                                >
                                    {
                                        createActive.inputData.imgUrls.length > 0 && createActive.inputData.imgUrls.map((item: any, index: number) => {
                                            return (
                                                <TouchableOpacity activeOpacity={1}>
                                                    <View style={styles.addPic}>
                                                        <Image source={{ uri: item }} style={{ width: "100%", height: "100%" }} />
                                                        <TouchableOpacity onPress={() => removeImage(index)} style={styles.imgCloseWrap}>
                                                            <Image source={createActivityCloseBtn} style={{ width: "100%", height: "100%" }}/>
                                                        </TouchableOpacity>
                                                    </View>
                                                </TouchableOpacity>
                                            )
                                        })
                                    }

                                    {
                                        createActive.inputData.imgUrls.length <= 9 && (
                                            <TouchableOpacity onPress={pickImage}>
                                                <View style={styles.addPic}>
                                                    <View style={styles.addIcon}>
                                                        <Image source={addIcon} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                </View>
                                            </TouchableOpacity>
                                        )
                                    }
                                </ScrollView>

                            </View>
                            <View style={[styles.tagLists, { flexDirection: "row" }]}>
                                {
                                    createActive?.inputData?.tags?.length > 0 && (
                                        <View style={[styles.tagItemList]}>
                                            {
                                                createActive?.inputData?.tags.map((item: any, index: number) => {
                                                    return (
                                                        <View style={[styles.tagItem, { marginRight :10 }]} key={index}>
                                                            <View style={styles.tagTitle}>
                                                                <Text style={styles.tagAddTitleText}>{ item }</Text>
                                                            </View>
                                                            <TouchableOpacity onPress={() => removeTagItem(index)}>
                                                                <View style={{ width: 7, height: 7, marginLeft: 5, }}>
                                                                    <Image source={tagCloseIcon} style={{ width: "100%", height: "100%" }} />
                                                                </View>
                                                            </TouchableOpacity>
                                                        </View>
                                                    )
                                                })
                                            }
                                        </View>
                                    )
                                }

                                <TouchableOpacity style={styles.tagWrap} onPress={() => setShowSelectTag(true)} activeOpacity={1}>
                                    <View style={styles.tagItem}>
                                        <View style={ styles.tagIcon }>
                                            <Image source={tagIcon} style={{ width: "100%", height: "100%" }}  />
                                        </View>
                                        <View style={styles.tagTitle}>
                                            <Text style={styles.tagTitleText}>添加活动标签</Text>
                                        </View>
                                        <View style={styles.tagRightIcon}>
                                            <Image source={tagIconRight} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            </View>

                            <View style={styles.addressContainer}>
                                <TouchableOpacity onPress={() => setShowSearchModal(true)}>
                                    <View style={styles.addressWrap}>
                                        <View style={styles.addressItem}>
                                            <View style={ styles.tagIcon }>
                                                <Image source={addressIcon} style={{ width: "100%", height: "100%" }}  />
                                            </View>
                                            <View style={styles.addressTitle}>
                                                {
                                                    createActive.inputData.currentLocation?.title && (
                                                        <Text style={[styles.addressTitleText, { maxWidth: 70 }]} numberOfLines={1}>{ createActive.inputData.currentLocation?.title }</Text>
                                                    )
                                                }

                                                {
                                                    !createActive.inputData.currentLocation?.title && (
                                                        <Text style={[styles.addressTitleText, { maxWidth: 70 }]} numberOfLines={1}>活动地址</Text>
                                                    )
                                                }
                                            </View>
                                            <View style={styles.tagRightIcon}>
                                                <Image source={addressRightIcon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => setShowSelectDate(true)}>
                                    <View style={styles.addressWrap}>
                                        <View style={styles.addressItem}>
                                            <View style={ styles.tagIcon }>
                                                <Image source={clockIcon} style={{ width: "100%", height: "100%" }}  />
                                            </View>
                                            <View style={styles.addressTitle}>
                                                {
                                                    !createActive.inputData.time && (
                                                        <Text style={styles.addressTitleText}>活动时间</Text>
                                                    )
                                                }
                                                {
                                                    createActive.inputData.time && (
                                                        <Text style={[styles.addressTitleText, { maxWidth: 170, }]} numberOfLines={1}>{ createActive.inputData.time }</Text>
                                                    )
                                                }
                                            </View>

                                            <View style={styles.tagRightIcon}>
                                                <Image source={addressRightIcon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={styles.selectContainer}>
                            <TouchableOpacity onPress={() => setFoundTextModel(true)}>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>活动人数</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        <Text style={styles.selectBtnWrapText}>{ createActive.inputData?.minNumOfPeople ? createActive.inputData?.minNumOfPeople : "请选择" }</Text>
                                        {
                                            !createActive.inputData?.minNumOfPeople && (<AntDesign name="right" size={12} color="#9C9EAC" />)
                                        }

                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                setShowActivityType(true)
                                const obj = { id: selectActivityType, index: selectTypeIndex }
                                setTempSelectTypeAll(obj);
                            }}>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>活动类型</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        <Text style={styles.selectBtnWrapText}>{ selectActivityType && typeList.length > 0 ? typeList[selectTypeIndex]?.label  : "请选择" }</Text>
                                        <AntDesign name="right" size={12} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={goTicketSetting}>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>票种设置</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        { createActive?.ticketData.length > 0 && <Text style={styles.selectBtnWrapText}>已创建</Text> }
                                        { createActive?.ticketData.length <= 0  && <Text style={styles.selectBtnWrapText}>请选择</Text>}
                                        <AntDesign name="right" size={12} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                setShowOpennessVisible(true)
                                const obj = { value: selectOpenness, index: selectOpennessIndex }
                                setTempOpenness(obj);
                            }}>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>公开</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        {
                                            selectOpenness && (
                                                <Text style={styles.selectBtnWrapText}>{ opennessList[selectOpennessIndex].label }</Text>
                                            )
                                        }
                                        {/*<Text style={styles.selectBtnWrapText}>请选择</Text>*/}
                                        <AntDesign name="right" size={12} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            {/*<TouchableOpacity>*/}
                            {/*    <View style={styles.selectItem}>*/}
                            {/*        <View>*/}
                            {/*            <Text>活动名片模板创建</Text>*/}
                            {/*        </View>*/}
                            {/*        <View style={styles.selectBtnWrap}>*/}
                            {/*            <Text style={styles.selectBtnWrapText}>请选择</Text>*/}
                            {/*            <AntDesign name="right" size={12} color="#9C9EAC" />*/}
                            {/*        </View>*/}
                            {/*    </View>*/}
                            {/*</TouchableOpacity>*/}
                            <TouchableOpacity onPress={goBindGroup}>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>关联社群</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        {
                                            createActive?.inputData?.parentId?.title && (
                                                <Text style={styles.selectBtnWrapText}>
                                                    { createActive?.inputData?.parentId?.title }
                                                </Text>
                                            )
                                        }
                                        {
                                            !createActive?.inputData?.parentId?.title && (
                                                <Text style={styles.selectBtnWrapText}>去关联</Text>
                                            )
                                        }
                                        <AntDesign name="right" size={12} color="#9C9EAC" />

                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>授权场地核销本活动</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        <SwitchToggle
                                            circleColorOff='#FFF'
                                            circleColorOn='#FFF'
                                            switchOn={createActive?.inputData.isWrittenOff}
                                            onPress={() => {
                                                console.log('hello')
                                                onChangeinputData(!createActive.inputData.isWrittenOff, "isWrittenOff")
                                            }}
                                            backgroundColorOn='#EC6138'
                                            backgroundColorOff='#E4E6EC'
                                            containerStyle={{
                                                width: 52, // 这里设置开关的宽度
                                                height: 28, // 设置开关的高度
                                                borderRadius: 20,
                                                padding: 4,
                                            }}
                                            circleStyle={{
                                                width: 22, // 设置开关按钮的宽度
                                                height: 22, // 设置开关按钮的高度
                                                borderRadius: 15,
                                            }}

                                        />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            {/*<TouchableOpacity>*/}
                            {/*    <View style={styles.selectItem}>*/}
                            {/*        <View>*/}
                            {/*            <Text>超过人数上限禁止报名</Text>*/}
                            {/*        </View>*/}
                            {/*        <View style={styles.selectBtnWrap}>*/}
                            {/*            <SwitchToggle*/}
                            {/*                circleColorOff='#FFF'*/}
                            {/*                circleColorOn='#FFF'*/}
                            {/*                backgroundColorOn='#EC6138'*/}
                            {/*                backgroundColorOff='#E4E6EC'*/}
                            {/*                containerStyle={{*/}
                            {/*                    width: 52, // 这里设置开关的宽度*/}
                            {/*                    height: 28, // 设置开关的高度*/}
                            {/*                    borderRadius: 20,*/}
                            {/*                    padding: 4,*/}
                            {/*                }}*/}
                            {/*                circleStyle={{*/}
                            {/*                    width: 22, // 设置开关按钮的宽度*/}
                            {/*                    height: 22, // 设置开关按钮的高度*/}
                            {/*                    borderRadius: 15,*/}
                            {/*                }}*/}
                            {/*            />*/}
                            {/*        </View>*/}
                            {/*    </View>*/}
                            {/*</TouchableOpacity>*/}
                            <TouchableOpacity>
                                <View style={styles.selectItem}>
                                    <View>
                                        <Text>报名者是否需要进行人工审核</Text>
                                    </View>
                                    <View style={styles.selectBtnWrap}>
                                        <SwitchToggle
                                            circleColorOff='#FFF'
                                            circleColorOn='#FFF'
                                            backgroundColorOn='#EC6138'
                                            backgroundColorOff='#E4E6EC'
                                            switchOn={createActive.inputData.isManualReviewed}
                                            onPress={() => onChangeinputData(!createActive.inputData.isManualReviewed, "isManualReviewed")}
                                            containerStyle={{
                                                width: 52, // 这里设置开关的宽度
                                                height: 28, // 设置开关的高度
                                                borderRadius: 20,
                                                padding: 4,
                                            }}
                                            circleStyle={{
                                                width: 22, // 设置开关按钮的宽度
                                                height: 22, // 设置开关按钮的高度
                                                borderRadius: 15,
                                            }}
                                        />
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.activityDescContainer}>
                            <View>
                                <View>
                                    <Text>
                                        报名须知
                                    </Text>
                                </View>
                                <View style={styles.registrationDesc}>
                                    <TextInput
                                        multiline={true}
                                        placeholder="如有参与者必须知晓的信息，可填写在这里"
                                        style={{ padding: 12 }}
                                        value={createActive.inputData?.participateInNotice}
                                        onChangeText={(val) => onChangeinputData(val, "participateInNotice")}
                                    ></TextInput>
                                </View>
                            </View>
                            <View>
                                <View>
                                    <Text>
                                        退款须知
                                    </Text>
                                </View>
                                <View style={styles.registrationDesc}>
                                    <TextInput
                                        multiline={true}
                                        placeholder="如有参与者必须知晓的信息，可填写在这里"
                                        style={{ padding: 12 }}
                                        value={createActive.inputData?.refundNotice}
                                        onChangeText={(val) => onChangeinputData(val, "refundNotice")}
                                    ></TextInput>
                                </View>
                            </View>
                            <View>
                                <View>
                                    <Text>
                                        参与者加入活动后，需要展示的信息
                                    </Text>
                                </View>
                                <View style={styles.registrationDesc}>
                                    <TextInput
                                        multiline={true}
                                        placeholder="如活动发起人联系方式或活动群等"
                                        style={{ padding: 12 }}
                                        value={createActive.inputData?.showToParticipants}
                                        onChangeText={(val) => onChangeinputData(val, "showToParticipants")}
                                    ></TextInput>
                                </View>
                            </View>
                            <View style={styles.contactWrap}>
                                <Text>联系方式</Text>
                                <TextInput
                                    placeholder="请输入联系方式"
                                    style={{ letterSpacing: 1 }}
                                    value={createActive.inputData?.contact}
                                    onChangeText={(val) => onChangeinputData(val, "contact")}
                                />
                            </View>

                        </View>

                    </View>
                    {
                        computedActiveBtn() && (
                            <TouchableOpacity onPress={buildActivity}>
                                <View style={styles.flexBottom}>
                                    <View style={styles.activeBottomBtn}>
                                        <Text style={styles.bottomBtnText}>发布活动</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        )
                    }

                    {
                        !computedActiveBtn() && (
                            <TouchableOpacity onPress={buildActivity}>
                                <View style={styles.flexBottom}>
                                    <View style={styles.bottomBtn}>
                                        <Text style={styles.bottomBtnText}>发布活动</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        )
                    }

                </ScrollView>
                <Modal
                    visible={showSearchModal}
                    transparent={true}
                    animationType="slide"
                    // onRequestClose={onClose}
                >
                    <View style={styles.overlay}>
                        <View style={styles.modalContainer}>
                            {/* 顶部标题栏 */}
                            <View style={styles.header}>
                                <TouchableOpacity onPress={() => setShowSearchModal(false)}>
                                    <Text style={styles.cancelText}>取消</Text>
                                </TouchableOpacity>
                                <Text style={styles.title}>活动地点</Text>
                                <TouchableOpacity onPress={() => {
                                    setShowSearchModal(false)
                                    if (activeAdress == 0) {
                                        dispatch(setInputDataByItem({ currentLocation: cityList[0] }))
                                    };
                                }}>
                                    <Text style={styles.confirmText}>确认</Text>
                                </TouchableOpacity>
                            </View>

                            {/* 搜索框 */}
                            <View style={styles.searchContainer}>
                                <View style={styles.searchWrap}>
                                    <View style={styles.searchIcon}>
                                        <Image source={searchIcon}  style={{ width: "100%", height: "100%" }} />
                                    </View>
                                    <TextInput
                                        ref={searchInptRef}
                                        style={styles.searchInput}
                                        placeholder="请输入搜索内容"
                                        onChangeText={searchByKeyword}
                                    />
                                    <TouchableOpacity onPress={searchByTitle} style={styles.searchBtn}>
                                        <Text style={styles.searchBtnText}>搜索</Text>
                                    </TouchableOpacity>
                                </View>

                                {/*{*/}
                                {/*    isVisialMap == false && (*/}
                                {/*        <TouchableOpacity onPress={() => blurSearchInp()}>*/}
                                {/*            <View style={styles.cancel}>*/}
                                {/*                <Text style={styles.cancelTexts}>取消</Text>*/}
                                {/*            </View>*/}
                                {/*        </TouchableOpacity>*/}
                                {/*    )*/}
                                {/*}*/}
                            </View>
                            {
                                  (
                                    <View style={{ height: 200, width: "100%", backgroundColor: "red" }}>
                                        <WebView originWhitelist={['*']} source={{ html }} ref={webviewRef} />
                                    </View>
                                )
                            }


                            <View style={{ height: 350, paddingHorizontal: 12, }}>
                                <FlatList
                                    data={cityList}
                                    renderItem={cityReaderItem}
                                    style={{ height: 350 }}
                                    showsVerticalScrollIndicator={false}  // 隐藏垂直滚动条
                                    showsHorizontalScrollIndicator={false} // 隐藏水平滚动条（如果有）
                                />
                            </View>
                        </View>
                    </View>
                </Modal>

                {/*<SingleOickerModal*/}
                {/*    visible={showSelectTag}*/}
                {/*    onCancel={() => setShowSelectTag(false)}*/}
                {/*    options={typeList}*/}
                {/*    value={selectActivityType}*/}
                {/*/>*/}

                <SingleOickerModal
                    visible={showActivityType}
                    title={"活动类型"}
                    isOne={true}
                    onCancel={() => {
                        resetSelectTypeAll()
                        setShowActivityType(false)
                    }}
                    options={typeList}
                    onChange={(val, index) => {
                        dispatch(setActivityTypeObj({ activityTypeObj: { val, index } }))
                        setSelectActivityType(val);
                        setSelectTypeIndex(index);
                    }}
                    value={selectActivityType}
                    onConfirm={() => {
                        setShowActivityType(false)
                    }}
                />

                <SingleOickerModal
                    visible={showOpennessVisible}
                    title={"公开度"}
                    onCancel={() => {
                        resetOpennessAll()
                        setShowOpennessVisible(false)
                    }}
                    options={opennessList}
                    onChange={(val, index) => {
                        setOpenness(val);
                        setOpennessIndex(index);
                        dispatch(setOpennessObj({ opennessObj: { val, index } }))
                    }}
                    value={selectOpenness}
                    onConfirm={() => {
                        setShowOpennessVisible(false)
                    }}
                />

                <MultiColumnPickerModal
                    visible={showSelectDate}
                    onCancel={() => setShowSelectDate(false)}
                    startValue={createActive.inputData?.durationStartTime}
                    endValue={createActive.inputData?.durationEndTime}
                    onConfirm={(time, startT, endT) => {
                        console.log('time', time);
                        console.log('startT', startT);
                        console.log('endT', endT);
                        // setActivityTime(time);
                        // console.log("startT", startT);
                        // setStartTime(startT);
                        // setEndTime(endT);
                        // dispatch(setActivityTimeforRedux({ startT, endT }))
                        if (startT && endT) {
                            dispatch(setInputDataByItem({ time, durationStartTime: startT, durationEndTime: endT }))
                        };


                    }}
                />

                <Modal
                    animationType="fade"
                    transparent={true}
                    visible={foundTextModel}
                >
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={(event) => {
                            if (event.target === event.currentTarget) {
                                setFoundTextModel(false);
                            }
                        }}
                        style={styles.becameModelContainer}
                    >
                        <View style={styles.becameModelWrap}>
                            <View style={styles.becameModelTitle}>
                                <Text style={styles.becameModelTitleText}>活动人数</Text>
                            </View>
                            <View style={styles.activityMemberWrap}>
                                <TextInput
                                    style={{ width: "100%" }}
                                    placeholder="请输入人数"
                                    value={createActive.inputData?.minNumOfPeople}
                                    onChangeText={(val) => onChangeinputData(val, "minNumOfPeople")}
                                />
                            </View>
                            <View style={styles.becameFootWrap}>
                                <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                    <View style={styles.cancelBtn}>
                                        <Text style={styles.cancelBtnText}>取消</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                    <View style={styles.okBtn}>
                                        <Text style={styles.okBtnText}>确认</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>

                <Modal
                    animationType="fade"
                    transparent={true}
                    visible={showSelectTag}
                >
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={(event) => {
                            if (event.target === event.currentTarget) {
                                setShowSelectTag(false);
                            }
                        }}
                        style={styles.becameModelContainer}
                    >
                        <View style={styles.becameModelWrap}>
                            <View style={styles.becameModelTitle}>
                                <Text style={styles.becameModelTitleText}>活动标签</Text>
                            </View>
                            <View style={styles.activityMemberWrap}>
                                <TextInput
                                    placeholder="例如桌游达人"
                                    value={currentTag}
                                    onChangeText={(val) => setCurrentTag(val)}
                                />
                            </View>
                            <View style={styles.becameFootWrap}>
                                <TouchableOpacity onPress={() => setShowSelectTag(false)}>
                                    <View style={styles.cancelBtn}>
                                        <Text style={styles.cancelBtnText}>取消</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={pushTag}>
                                    <View style={styles.okBtn}>
                                        <Text style={styles.okBtnText}>确认</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>

                </Modal>
            </KeyboardAwareScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F7F7F7',
    },
    scrollView: {
        flex: 1,
    },
    scrollViewContent: {
        padding: 0,
    },
    textInput: {
        height: 50,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        paddingHorizontal: 12,
        marginBottom: 16,
        backgroundColor: '#fff',
    },
    createActivityContainer: {
        paddingHorizontal: 12,
        paddingTop: 15,
        paddingBottom: 15,
        // paddingLeft: 12,
        // paddingRight: 12,
    },
    createActivityHeader: {
        backgroundColor: "#fff",
        borderRadius: 10,
        paddingVertical: 12,
        paddingHorizontal: 12,
    },
    activityTitle: {
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
        paddingBottom: 12,
    },
    activityDesc: {
        height: 100,
        marginTop: 12,
    },
    addPicContainer: {
        marginTop: 12,
        flexDirection: "row",
        justifyContent: "space-between",
        flexWrap: "wrap"
    },
    addPic: {
        width: 82,
        height: 82,
        backgroundColor: "#F7F8F9",
        position: "relative",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginRight: 10,
    },
    addIcon: {
        width: 16,
        height: 16,
    },
    tagWrap: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 19,
        // marginRight: 10,
        // paddingHorizontal: 9,
        marginRight: 0,

        // marginBottom: 16,
    },
    tagItemList: {
        flexDirection: "row",
        alignItems: "center",
        flexWrap: "wrap",
        marginTop: 19,
        // marginRight: 5,
        paddingHorizontal: 9,
        marginRight: 0,
    },
    tagItem: {
        backgroundColor: "#F3F8FD",
        flexDirection: "row",
        paddingHorizontal: 9,
        paddingVertical: 3,
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 5,
    },
    tagIcon: {
        width: 12,
        height: 12,
    },
    tagTitle: {
        marginHorizontal: 2,
    },
    tagTitleText: {
        color: "#1B5098",
        fontSize: 12,
    },
    tagAddTitleText: {
        color: "#1B5098",
        fontSize: 12,
    },
    tagRightIcon: {
        width: 5,
        height: 5
    },
    addressContainer: {
        flexDirection: "row",
    },
    addressWrap: {
        marginRight: 12,
    },
    addressItem: {
        backgroundColor: "#FFF",
        flexDirection: "row",
        paddingHorizontal: 4,
        paddingVertical: 3,
        borderRadius: 10,
        alignItems: "center",
        borderWidth: 0.3,
        borderColor: "#E4E6EC"
    },
    addressTitle: {
        marginHorizontal: 2,
    },

    addressTitleText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    selectContainer: {
        backgroundColor: "#fff",
        marginTop: 12,
        borderRadius: 10,
        paddingHorizontal: 12,
    },
    selectItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingVertical: 12,
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC"
    },
    selectBtnWrap: {
        flexDirection: "row",
        alignItems: "center"
    },
    selectBtnWrapText: {
        color: "#9C9EAC"
    },
    activityDescContainer: {
        marginTop: 12,
        backgroundColor: "#fff",
        padding: 12,
    },
    registrationDesc: {
        height: 100,
        backgroundColor: "#F7F8F9",
        marginTop: 10,
        borderRadius: 6,
        marginBottom: 24,
    },
    contactWrap: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    flexBottom: {
        paddingBottom: 50,
        paddingTop: 13,
        backgroundColor: "#fff"
    },
    bottomBtn: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#E4E6EC",
        margin: "auto",
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderTopWidth: 0.5,
        borderTopColor: "#E4E6EC"
    },
    activeBottomBtn: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#EC6138",
        margin: "auto",
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderTopWidth: 0.5,
        borderTopColor: "#E4E6EC"
    },
    bottomBtnText: {
        color: "#fff",
    },
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
    },
    modalContainer: {
        backgroundColor: '#fff',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        paddingBottom: 20,
        maxHeight: '80%',
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 15,
        // borderBottomWidth: 1,
        // borderBottomColor: '#ddd',
    },
    title: {
        fontSize: 14,
        fontWeight: 'bold',
    },
    cancelText: {
        color: '#333333',
    },
    confirmText: {
        color: '#EC6138',
    },
    searchInput: {
        flex:1
    },
    content: {
        // paddingHorizontal: 15,
    },
    mapPlaceholder: {
        height: 150,
        backgroundColor: '#f0f0f0',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 15,
        borderRadius: 5,
    },
    locationItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
    },
    adressIcon: {
        width: 14,
        height: 14,
    },
    locationTitle: {
        fontSize: 14,
        color: "#2A2B30",
        fontWeight: '500',
        marginBottom: 8,
    },
    locationDescription: {
        fontSize: 12,
        color: '#888',
        marginBottom: 4,
    },
    searchIcon: {
        width: 12,
        height: 12,
        marginRight: 4,
    },
    searchContainer: {
        flexDirection: "row",
        alignItems: "center"
        // margin: 15,
        // padding: 10,
        // borderRadius: 18,
        // backgroundColor: "#F7F8F9",
        // paddingLeft: 12,
    },
    searchWrap: {
        flexDirection: "row",
        alignItems: "center",
        margin: 15,
        // padding: 10,
        borderRadius: 18,
        backgroundColor: "#F7F8F9",
        paddingLeft: 12,
        flex: 1,
        // marginRight: 30,
    },
    cancel: {},
    cancelTexts: {
        fontSize: 14,
        color: "#333333",
        marginRight: 12,
    },
    becameModelContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",
    },
    becameModelWrap: {
        width: scaleSize(296),
        // height: scaleSize(270),
        backgroundColor: "#fff",
        margin: "auto",
        borderRadius: 8,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18,
        paddingBottom: 20,
        position: "relative",
        zIndex: 9,
    },
    becameModelTitle: {
        marginBottom: 14,
    },
    becameModelTitleText: {
        textAlign: "center",
        fontSize: 16,
        // fontWeight: "bold"
        // color: "#2A2B30"
    },
    becameFootWrap: {
        // marginTop: 58,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 10,
        paddingRight: 10,
    },
    cancelBtn: {
        backgroundColor: "#F7F8F9",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    cancelBtnText: {
        // fontWeight: "bold",
    },
    okBtnText: {
        color: "#fff",
        fontWeight: "bold",
    },
    okBtn: {
        backgroundColor: "#EC6138",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    activityMemberWrap: {
        flexDirection: "row",
        alignItems: "center",
        height: 36,
        width: "100%",
        backgroundColor: "#F7F8F9",
        borderRadius: 17,
        paddingHorizontal: 12,
        marginBottom: 24
    },
    tagLists: {
        flexDirection: "row",
        justifyContent: "flex-start",
        marginBottom: 16,
        marginRight: 0,
        flexWrap: "wrap",
    },
    imgCloseWrap: {
        position: "absolute",
        right: 0,
        top: 0,
        width: 15,
        height: 15,
        zIndex: 10
    },
    searchBtn: {
        paddingVertical: 9,
        paddingHorizontal: 14,
        borderRadius: 19,
        backgroundColor: "#EC6138",
        // marginRight: 14,
    },
    searchBtnText: {
        color: '#fff',
        fontSize: 16,
    },
});

export default createActivityScreen;
